<template>
    <section>
        <div class="wrapper">
            <h2>补充医疗互助申请表</h2>
            <van-cell title="照片" is-link>
                <template #default>
                    <van-uploader v-model="fileList" multiple :max-count="1" :deletable="false"
                    :max-size="500 * 1024" />
                </template>
            </van-cell>

            <van-field v-model="userInfo.userName" label="姓名" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.userSex" label="性别" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.userOrganName" label="工作单位" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.xgno" label="工号" input-align="right" disabled is-link/>

             <van-field v-model="userInfo.workTime" label="参加工作时间" input-align="right" disabled is-link/>  <!-- @click="showDatePicker = true" -->

            <van-field v-model="userInfo.idcard" label="身份证号"  input-align="right" disabled is-link/>

            <van-field required v-model="userInfo.userAddress" label="家庭住址" placeholder="请填写" input-align="right" is-link/>

            <van-field required v-model="userInfo.homeTelephone" type="tel" label="住宅电话" placeholder="请填写" input-align="right" is-link/>

            <van-field required v-model="userInfo.mobileTelephone" type="tel" label="手机号码" placeholder="请填写" input-align="right" is-link/>

            <p>
                <button @click="register">确认申请</button>
            </p>

            <van-popup v-model="show">
                <div class="message">
                    <h3>教职工生病住院申请补充医疗<br>保险互助金须知</h3>

                  <p>
                    凡参加了校补充医疗保险互助的在职或退休教职工因病住院均可申请补充医疗保险互助金。
                  </p>

                  <p>
                    1、当年度首次起报，住院医疗总费用在4000元以上（含4000元）有应付起付线的，需提供的材料为：身份证、《城镇职工住院结算单》及住院发票。
                  </p>

                  <p>
                    2、安装或更换了人体内置材料的，除以上材料外还需提供安装或更换内置材料费用清单。
                  </p>

                  <p>
                    3、女职工生育住院的，需提供身份证、《城镇职工生育住院结算单》及住院发票。
                  </p>

                  <p>
                    4、未办理异地安置在异地住院的，必须先到校人事处医保科办理相关手续，再凭身份证、《湖南省省医保局费用审核结算单》到工会办理相关手续。
                  </p>

                  <p>
                    5、2018年起，办理了异地安置和《湖南省社会保障卡》在全国联网医院就医的退休教职工，需提供身份证、《XX市跨省异地就医住院结算单》、《XX市跨省异地就医住院费用结算单》、住院发票。
                  </p>

                  <p>
                    6、所报销的补充医疗保险互助金均通过财务处代发至本人学校发放工资的银行账户，不以现金形式发放。
                  </p>

                  <p>
                    7、为确保校财务处会计信息的及时性和准确性，按照财务制度有关要求，请各位老师务必及时报销住院财务票据。当年发生的住院票据，原则上应报销完毕，对于在12月所发生的住院票据，未能在当年报销的，应在下年度4月底之前全部报销完毕。过期票据原则上一律不予报销。
                  </p>

                  <p>
                    8、除节假日外的每周二、周四校工会大病医疗互助办公室（校工会二楼203）联系电话：88872009，全天接受申请材料和办理相关手续。
                  </p>
                    <ul>
                        <li @click="show=false">上一步</li>
                        <li @click="confirm">确认</li>
                    </ul>
                </div>
            </van-popup>
        </div>

        <van-popup v-model="showDatePicker" round position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择参加工作时间"
                :min-date="minDate"
                :max-date="maxDate"
                :formatter="formatter"
                @cancel="showDatePicker = false"
                @confirm="selectDate"
            />
        </van-popup>
    </section>
</template>
<script>
import api from "@/data/api/index.js";
import check from "@/data/api/check.js";

import Vue from 'vue';
import { Field } from 'vant';
import { Cell } from 'vant';
import { RadioGroup, Radio } from 'vant';
import { Popup } from 'vant';
import { DatetimePicker  } from 'vant';
import { Picker } from 'vant';
import { Uploader } from 'vant';
import { Toast } from 'vant';
import 'vant/lib/index.css';

Vue.use(Field);
Vue.use(Cell);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Picker);
Vue.use(Uploader);
Vue.use(Toast);

export default {
    data(){
        return{
            showDatePicker: false,
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(2030, 11, 31),
            currentDate: new Date(1980, 0, 1),
            fileList: [],
            fileBase64: '',
            show: false,
            //用户信息
            userInfo: {
                userId:'',
                userName:'',
                userSex:'',
                department:'',
                xgno:'',
                workTime:'',
                idcard:'',
                userAddress:'',
                mobileTelephone:'',
                homeTelephone:'',
                unionId:'',
                unionName:'',
                status:'0',
            },
            photoUrl: {},
            loading: false
        }
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        // 获取当前用户信息
        getUserInfo(){
            let user=JSON.parse(sessionStorage.getItem("user"));
            this.userInfo.userId = user.userId;
            this.userInfo.userName = user.userName;
            this.userInfo.xgno = user.xgno;
            this.userInfo.mobileTelephone = user.userMobile;
            this.userInfo.userSex=user.userSex
            this.userInfo.unionName = user.unionName;
            this.userInfo.userOrganName= user.userOrganName;
            if(user.workTime){
              this.userInfo.workTime = user.workTime.split(" ")[0]
            }
            api.getUnionsByGroup().then(res=>{
                this.userInfo.unionId=res.unionId
            })
            this.userInfo.idcard = user.idcard
            this.userInfo.userAddress = user.userAddress
            this.userInfo.homeTelephone = user.userMobile
            // 照片
            this.photoUrl.url='https://i.hunnu.edu.cn/ums/avatar/'+user.userAccount;
            this.photoUrl.isImage=true;
            this.fileList.push(this.photoUrl);

            let orgInfoList = JSON.parse(sessionStorage.getItem("orgInfoList"));
            if(orgInfoList?.length > 0){
              this.userInfo.userOrgan = orgInfoList[0].code;
              this.userInfo.userOrganName = orgInfoList[0].name;
            }

        },
        // 获取工会信息
        // getUnionInfo(id){
        //     api.unionInfo(id).then(res => {
        //         this.userInfo.unionName=res.unionName;
        //     });
        // },
        // 选择日期
        selectDate(date) {
            var year = date.getFullYear();
            var month = this.formatDate(date.getMonth()+1);
            var day = this.formatDate(date.getDate());
            this.userInfo.workTime = year+'-'+month+'-'+day;
            this.showDatePicker = false;
        },
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            return val;
        },
        formatDate(val){
            if(val<10){
                return "0" + val;
            }else{
                return val;
            }
        },
        // 申请
        register(){
            if(!this.userInfo.workTime){
                Toast('您的入职时间尚未完善，请联系工会管理员！');
                return;
            }

            if(!this.userInfo.idcard){
                Toast('请填写身份证号！');
                return;
            }
            if(!this.userInfo.userAddress){
                Toast('请填写家庭地址！');
                return;
            }
            if(!this.userInfo.homeTelephone){
                Toast('请填写住宅电话！');
                return;
            }

            let tel=this.userInfo.mobileTelephone;
            if(tel=="" || tel==null){
                Toast("请填写手机号码！");
                return;
            }
            let patt= /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
            if(!patt.test(tel)){
                Toast("手机号码格式错误！");
                return;
            }

            this.show=true;
        },
        // 确认
        confirm(){
          if(this.loading){
            Toast("请勿重复提交");
            return;
          }
          this.loading = true
            let _this=this;
          api.supplementSave(this.userInfo).then(res => {
              if(res.code=="success"){
                  _this.$troute.query('msSuccess');
              }else{
                  Toast.fail({
                      message: res.desc,
                      onClose:()=>{
                          _this.$troute.query('mmIndex');
                      }
              });
          }
             // this.loading = false
         });
        },
    },
}
</script>
<style lang="scss" scoped>
.wrapper{
    padding: 4px;
    font-size: 16px;
    h2{
        position: relative;
        display: inline-block;
        font-size: 24px;
        margin: 10px 16px;
        z-index: 1;
        &::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 1px;
            height: 5px;
            background-color: #C9151E;
            z-index: -1;
        }
    }
    >p{
        padding: 50px 16px 25px;
        button{
            display: block;
            width: 100%;
            height: 50px;
            color: #fff;
            font-size: 20px;
            background-color: #9E0F16;
            border-radius: 25px;
        }
    }
    .van-popup{
        width: 90%;
        height: 90%;
        overflow: hidden;
        border-radius: 5px;
    }
}
.message{
    position: relative;
    height: 100%;
    padding: 25px 25px 100px;
    box-sizing: border-box;
    overflow: auto;
    h3{
        font-size: 18px;
        text-align: center;
        margin-bottom: 15px;
    }
    p{
        line-height: 1.75em;
        font-size: 15px;
        text-indent: 2em;
    }
    ul{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        padding: 15px;
        background-color: #fff;
        li{
            flex-grow: 1;
            padding: 10px 0;
            margin: 0 10px;
            color: #9E0F16;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            border: 1px solid #9E0F16;
            border-radius: 23px;
            &:last-child{
                color: #fff;
                background-color: #9E0F16;
            }
        }
    }
}
</style>
